<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Elmer I Fast build Admin dashboard for any platform</title>
    <meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
    <meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
    <meta name="author" content="hencework"/>

    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">
    <script src="dist/js/echarts.min.js"></script>

</head>
<body>

<!--/Preloader-->
<div class="wrapper  theme-1-active pimary-color-blue">
    <!-- Main Content -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default card-view">
                <div class="panel-heading">
                    <div class="pull-left">
                        <h6 class="panel-title txt-dark">统计平均工资前10城市</h6>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-wrapper collapse in">
                    <div class="panel-body">
                        <!--图表区域-->
                        <div id="main" style="height: 700px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>
<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

<script>
    //1.创建echarts对象
    var mychart = echarts.init(document.getElementById("main"));

    //2.发送ajax请求
    $.post("/lg_viewer/city/salaryTop.do",function(data){
        //3.在回调函数中设置 option
        mychart.setOption({
            tooltip: {    //提示组件
                trigger: 'axis',  //如果是柱状图或折线图触发
                axisPointer: {    //坐标轴指示配置项
                    type: 'shadow'  // 默认值 line    shadow 阴影指示器
                }
            },
            grid: {     //直角坐标系网络 ,网络中绘制折线图  柱状图 ...
                left: '3%',   //组件举例左侧容器举例
                right: '4%',
                bottom: '3%',
                containLabel: true //grid 区域是否有坐标轴的刻度
            },
            xAxis: {
                type: 'value',  //数值轴
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category', //类目轴
                data: data.data.names
            },
            series: [
                {
                    name: '平均工资',
                    type: 'bar',  //柱状图
                    data: data.data.count,
                    label: {  //图形上添加文字标签
                        show:true , //是否在标签上展示
                        position: 'insideRight' //标签数据展示位置
                    }
                }
            ]
        });
    },"json")



</script>

</body>

</html>
